<template>
    <div class="divCommomStyle">
      <div class="content">
        <div id="lineChart" :style="{width: '100%', height: '100%'}"></div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      lineChart: null
    }
  },
  mounted () {
    this.initLineChart('lineChart')
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.lineChart) {
      this.lineChart.resize()
    }
  },
  methods: {
    initLineChart (chartBoxId) {
      var charts = {
        unit: '',
        names: ['白天', '晚上'],
        lineX: ['7点', '8点', '9点', '10点', '11点', '12点', '13点'],
        value: [
          [0, 352, 303, 534, 95, 236, 0, 328, 159, 151, 231, 192, 453, 524, 165, 236, 527, 328, 129, 0],
          [0, 545, 80, 192, 330, 580, 0, 80, 250, 453, 352, 28, 625, 345, 65, 325, 468, 108, 253, 0]
        ]

      }
      var color = ['rgba(23, 255, 243', 'rgba(119,61,190']
      var lineY = []
      for (var i = 0; i < charts.names.length; i++) {
        var x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        var data = {
          name: charts.names[i],
          type: 'line',
          color: color[x] + ')',
          smooth: true,
          areaStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: color[x] + ', 0.3)'
              },
              {
                offset: 0.8,
                color: color[x] + ', 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          symbol: 'circle',
          symbolSize: 5,
          data: charts.value[i]
        }
        lineY.push(data)
      }
      var option = {
        // backgroundColor: '#0d235e',
        title: {
          text: `24小时人流量统计`,
          x: 'left',
          textStyle: {
            color: '#29adf1',
            fontSize: '14',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: charts.names,
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
          },
          right: '4%'
        },
        grid: {
          top: '25%',
          left: '4%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: charts.lineX,
          axisLabel: {
            textStyle: {
              color: 'rgb(11, 184, 207,1)'
            },
            formatter: function (params) {
              return params.split(' ')[0]
            }
          }
        },
        yAxis: {
          name: charts.unit,
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgb(11, 184, 207,1)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgb(23,255,243,0.3)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          }
        },
        series: lineY
      }
      this.lineChart = this.$echarts.init(document.getElementById(chartBoxId))
      setInterval(() => {
        this.lineChart.setOption({
          legend: {
            selected: {
              '出口': false,
              '入口': false
            }
          }
        })
        this.lineChart.setOption({
          legend: {
            selected: {
              '出口': true,
              '入口': true
            }
          }
        })
      }, 10000)
      this.lineChart.setOption(option)
      window.addEventListener('resize', () => {
        this.lineChart.resize()
      })
    }
  }
}
</script>

<style scoped>
.divCommomStyle{
  display: flex;
  /* height: 30%; */
  justify-content: center;
  align-items: center;
}
.divCommomStyle .content{
  display: flex;
  justify-content: space-between;
}
</style>
